<template>
  <div class="container">
    <div class="title" style="line-height: 24px;font-size: 22px;text-align: left;display: flex">
      <h1><span style="font-size: 18px;"> 店铺名称：</span>{{ canteenShopData.shopName }}</h1>
      <h1 style="margin-left: 20px">
        <div>
          <el-icon>
            <View/>
          </el-icon>
          <span>{{ canteenShopData.shopView }}</span></div>
      </h1>
    </div>
    <!-- 作者及更新时间 -->
    <div class="section">
      <div class="section-title">作者及更新时间</div>
      <div class="section-content">
        <p style="text-indent: 5px;">作者：
          <el-avatar :src=canteenShopData.shopAuthorAvatarUrl/>
          {{ canteenShopData.shopAuthor }}
        </p>
        <p style="text-indent: 5px;">本帖创建时间：{{ canteenShopData.shopCreateTime }}</p>
        <p style="text-indent: 5px;">最近更新时间：{{ canteenShopData.shopUpdateTime }}</p>
      </div>
    </div>

    <!-- 店铺描述 -->
    <div class="section">
      <div class="section-title">店铺描述</div>
      <div class="section-content">
        <p style="text-indent: 5px;">店铺描述：{{ canteenShopData.shopDescription }}</p>
      </div>
    </div>

    <!-- 店铺位置 -->
    <div class="section">
      <div class="section-title">店铺位置</div>
      <div class="section-content">
        <p style="text-indent: 5px;">店铺所在食堂及楼层：{{ canteenShopData.shopAt }}{{ canteenShopData.shopFloor }}</p>
        <p style="text-indent: 5px;">店铺位置指引：{{ canteenShopData.shopRelativePosition }}</p>
      </div>
    </div>

    <!-- 支付方式 -->
    <div class="section">
      <div class="section-title">支付方式</div>
      <div class="section-content">
        <p style="text-indent: 5px;">支付方式：{{ canteenShopData.shopPayment }}</p>
      </div>
    </div>

    <div class="section">
      <div class="section-title">店铺照片(目前暂时只支持1张)</div>
      <!-- 店铺图片 -->
      <div class="img">
        <img :src="canteenShopData.shopImage" alt="图片"/>
      </div>
    </div>


    <!-- 操作按钮 -->
    <div class="buttons">
      <el-button type="primary" @click="Edit">编辑</el-button>
      <el-button type="danger" @click="Delete">删除</el-button>
    </div>

    <!-- 编辑记录 -->
    <div class="section" style="margin-top: 20px;">
      <div class="section-title">编辑记录</div>
      <el-collapse v-model="activeNames" style="margin-top: 20px;">
        <el-collapse-item name="1" title="点击展开/收起">
          <div class="edit-record">
            <div
                v-for="(edit, index) in canteenShopRecentEdit"
                :key="index"
                class="edit-item"
            >
              {{ edit.updateEditor }} 于 {{ edit.updateTime }} 编辑了 {{ edit.updateOperation }} 部分
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>

    <div class="section" style="margin-top: 20px;">
      <div class="section-title">评论区</div>
      <!-- 评论区 -->
      <el-collapse v-model="activeNames" style="margin-top: 20px;">
        <el-collapse-item name="2" title="点击展开/收起">
          <CommentList/>
          <CommentBox/>
        </el-collapse-item>
      </el-collapse>
    </div>

  </div>
</template>

<script>
import axios from "axios";
import {ElMessage, ElMessageBox} from "element-plus";
import router from "@/router/index.ts";
import CommentBox from "@/views/Comment/CommentBox.vue";
import CommentList from "@/views/Comment/CommentList.vue";
import {View} from "@element-plus/icons-vue";

export default {
  components: {
    View,
    CommentList,
    CommentBox,
  },
  data() {
    return {
      shopId: "",
      canteenShopData: [],
      canteenShopRecentEdit: [],
      currentUser: "",
      activeNames: [], // 控制折叠展开
      isMounted: true,
      timer: null,
    };
  },
  mounted() {
    this.shopId = this.$route.query.shopId;
    console.log(this.shopId);
    this.currentUser = localStorage.getItem('username');
    this.getCanteenShopData();
    this.getCanteenShopRecentEdit();
    this.timer = setTimeout(this.addView, 5000);
  },
  unmounted() {
    clearTimeout(this.timer);
    this.isMounted = false;
  },
  methods: {
    // 增加浏览量的逻辑（5秒）
    addView: function () {
      if (!this.isMounted) {
        console.log("组件已卸载，不再增加浏览量");
        return;
      }
      axios.post("/canteenshop/addView/" + this.shopId).then((res) => {
        console.log(res.data.data);
      }).catch((error) => {
        ElMessage.error(error);
      })
    },
    getCanteenShopData: function () {
      axios.get("/canteenshop/get/single/" + this.shopId).then((res) => {
        console.log(res.data.data);
        this.canteenShopData = res.data.data;
      }).catch((error) => {
        ElMessage.error("获取数据失败");
      });
    },
    getCanteenShopRecentEdit: function () {
      axios.get("recentEdit/canteenShop/" + this.shopId).then((res) => {
        console.log(res.data.data);
        this.canteenShopRecentEdit = res.data.data;
      })
    },
    Edit: function () {
      router.push({
        path: '/editCanteenShop',
        query: {
          shopId: this.shopId,
        },
      })
    },
    Delete: function () {
      // 删除逻辑
      console.log("删除按钮被点击");
      ElMessageBox.confirm(
          '此操作将永久删除该店铺, 是否继续?',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            class: 'my-message-box',
          }
      ).then(() => {
        if (this.canteenShopData.shopAuthor !== this.currentUser) {
          ElMessage.error('您不是该店铺的创建者，无法删除');
          return;
        }
        axios.delete("/canteenshop/delete/" + this.shopId).then((res) => {
          console.log(res.data.data);
          router.push('/TJUT2ndCanteen')
        })
        ElMessage.success('已删除');
      }).catch(() => {
        ElMessage.info('已取消删除');
      })
    },

  },
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.section {
  border-top: 2px solid #181818;
  border-radius: 0;
  padding: 10px;
  position: relative;
  margin-bottom: 10px;
}

.section-title {
  font-size: 22px;
  font-weight: bold;
  position: absolute;
  top: -15px;
  left: 40px;
  background-color: #e9eef3;
  padding: 5px;
  border-radius: 5px;
  line-height: 22px;
}

.section-content {
  font-size: 20px;
  line-height: 24px;
}

.section-content p {
  text-indent: 5px;
  text-align: left;
}

.img {
  width: 200px;
  height: 200px;
  overflow: hidden;
  margin-bottom: 10px;
}

.img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 2px;
}

.buttons {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.edit-record,
.comment-list {
  padding: 10px;
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.edit-item {
  margin-bottom: 5px;
  padding: 5px;
  background-color: #f0f8ff;
  border: 1px solid #dcdcdc;
  border-radius: 5px;
  line-height: 1.2;
  font-size: 14px;
}

/* 暗黑模式下的样式 */
[data-theme="dark"] .container {
  background-color: black; /* 容器背景变为深灰色 */
  color: white; /* 字体变为白色 */
}

[data-theme="dark"] .section {
  border-top-color: white; /* 边框变为白色 */
}

[data-theme="dark"] .section-title {
  background-color: black; /* 标题背景变为深灰色 */
  color: white; /* 标题字体变为白色 */
}

[data-theme="dark"] .section-content {
  background-color: black; /* 内容背景变为深灰色 */
  color: white; /* 内容字体变为白色 */
}

[data-theme="dark"] .img {
  border: 1px solid white; /* 图片边框变为白色 */
}

[data-theme="dark"] .buttons {
  background-color: black; /* 按钮容器背景变为深灰色 */
}

[data-theme="dark"] .buttons .el-button {
  background-color: black; /* 按钮背景变为深灰色 */
  color: white; /* 按钮字体变为白色 */
}

[data-theme="dark"] .buttons .el-button:hover {
  background-color: black; /* 按钮悬停背景变为深灰色 */
}

[data-theme="dark"] .edit-record,
[data-theme="dark"] .comment-list {
  background-color: black; /* 编辑记录和评论区背景变为深灰色 */
  border-color: white; /* 边框变为白色 */
  color: white; /* 字体变为白色 */
}

[data-theme="dark"] .edit-item {
  background-color: #555; /* 编辑记录项背景变为深灰色 */
  border-color: white; /* 边框变为白色 */
  color: white; /* 字体变为白色 */
}
</style>